<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:rsf="http://ponder.org.uk" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Site Add Participant</title>
	<link href="/library/skin/tool_base.css" rsf:id="scr=portal-matter" type="text/css" rel="stylesheet" media="all"/>
	<link href="/library/skin/default-skin/tool.css" rsf:id="scr=portal-matter" type="text/css" rel="stylesheet" media="all"/>
	<script type="text/javascript" rsf:id="resize"/>
	<link type="text/css" href="/library/webjars/jquery-ui/1.12.1/jquery-ui.min.css" rel="stylesheet" media="screen" />
	<script type="text/javascript" src="/library/js/headscripts.js"></script>
	<script type="text/javascript">includeLatestJQuery('site-manage');</script>
	<script type="text/javascript" src="/library/js/spinner.js"></script>
</head>

<body>
<div id="participant-body" class="portletBody">
	<div rsf:id="content:">
		<!-- instruction for adding participant to course sites  -->
		<div class="page-header">
			<h1 rsf:id="msg=java.addp">Add Participant</h1>
		</div>
		<p>
			<span rsf:id="add.official" class="highlight"></span>
			<span rsf:id = "add.official1"></span>
		</p>
		<p rsf:id = "add.official.instruction"></p>
		<!-- alert message -->
		<div rsf:id="error-row:">
			<div class="sak-banner-error" rsf:id="error">We Have Errors!</div>
		</div>
		<div rsf:id="info-row:">
			<div class="sak-banner-info" rsf:id="info">We Have Infos!</div>
		</div>

		<!-- form for adding participant -->
		<form rsf:id="participant-form" >
			<input rsf:id="csrfToken" name="csrfToken" id="csrfToken" type="hidden"/>
			<!-- add official account -->
			<h3 rsf:id="officialAccountSectionTitle"></h3>
			<label rsf:id="officialAccountLabel" for ="officialAccountParticipant">
	           Official Account Label
	        </label>
	        <br/>
	        <textarea rsf:id="officialAccountParticipant" name="officialAccountParticipant" cols="35" rows="4" id="officialAccountParticipant"></textarea>
			<a href="#" onclick="rsf:id='officialAccountPickerAction'" aria-hidden="true"><strong rsf:id="officialAccountPickerLabel"></strong></a><br />
			<p class="form-text textPanelFooter" rsf:id="msg=add.multiple"></p>
			
			<!-- add non-official account -->
			<h3 rsf:id="nonOfficialAccountSectionTitle"></h3>
			<label rsf:id="nonOfficialAccountLabel" for ="nonOfficialAccountParticipant">
	           Non-Official Account Label
	        </label>
	        <br/>
	        <textarea rsf:id="nonOfficialAccountParticipant" name="nonOfficialAccountParticipant" cols="35" rows="4" id="nonOfficialAccountParticipant"></textarea>
			<p class="help-block textPanelFooter" rsf:id="nonOfficialAddMultiple"></p>
			
			<!--  choose roles -->
			<span rsf:id="select-roles"></span>
			<fieldset>
				<legend class="nopad" rsf:id="msg=add.participants"></legend> 
				<div rsf:id="role-row:">
					<input rsf:id="role-select" title="Select role type" type="radio" id="radio" name="roleChoice" value=""/>
					<label rsf:id="role-label" for="role-select">
						label
					</label>
				</div>
			</fieldset>
						
			<!--  choose active/inactive status -->
			<span rsf:id="select-status"></span>
			<fieldset>
				<legend class="nopad" rsf:id="status-message"></legend>
				<div rsf:id="status-row:">
					<input rsf:id="status-select" title="Select status type" type="radio" id="radio" name="statusChoice" value=""/>
					<label rsf:id="status-label" for="status-select">
					label
					</label>
				</div>
			</fieldset>
			
			<p class="act">
				<input accesskey ="s" rsf:id="continue" class="active" value="Save" type="submit" onclick="SPNR.disableControlsAndSpin( this, null );" />
				<input accesskey ="x" rsf:id="cancel" value="Cancel" type="submit" onclick="SPNR.disableControlsAndSpin( this, null );" />
			</p>
		</form>
	</div>
</div>
</body>
</html>
